<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.js"></script>
    <style>
        * {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        @font-face{
            font-family: QS-R;
            src:url(/font/Quicksand-Regular.ttf);
        }
        @font-face{
            font-family: QS-M;
            src:url(/font/Quicksand-Medium.ttf);
        }
        .nav .nav-content {
            width: 700px;
            margin: 0 auto;
            display:flex;
            align-items:center;
            justify-content :space-between;
        }
        .nav .nav-content h1{
            font-family: QS-R;
            text-align:right;
        }
        .nav .wel-content div {
            font-size: 32px;
            font-family: QS-R;
            font-weight: 900;
            text-align: right;
        }
    </style>
    <style>
        .split-line {
            width:700px;
            margin: 0 auto;
            display:flex;
            align-items:center;
            justify-content :space-between;
        }
        .dot {
            font-size:0;
            border-radius: 50%;
            border: 5px solid black;
        }
    </style>
    <style>
        .clearfix::after {
            content:"";
            display: block;
            height:0;
            clear: both;
        }

        .main {
            width:700px;
            margin: 50px auto 0;
            padding: 0 58px;
            font-family: QS-R;
            font-size:18px;
            font-weight: 600;
        }
        .main .content {
            float:left;
            font-family: QS-R;
            font-size:20px;
            font-weight:bold;
        }


        .main .func-bar .content span {
            margin: 0 8px;
            color: #1b6d85;
            top:1px
        }



        .main .right-content .topic-container .topic-title span {
            margin: 0 8px;
            color: #1b6d85;
            top:5px
        }

        .main .btn-bar .btn-style {
            width:140px;
            font-family: QS-R;
            font-size: 14px;
            text-align: center;
            background-color:mediumblue;
            color:white;
            border-radius: 5px;
            display:inline-block;
        }
        .main .detail {
            border:6px solid #004add;

        }
        .main .mg {
            margin-bottom: 22px;
        }
        .main .func-bar .func-type {
            width:170px;
            margin-right: 14px;
        }
        .main .func-bar .func-title {
            width:400px;

        }
        .main .btn-bar {
            margin-left: 298px;
        }
        .disabled-style {
            color:darkgray;
        }



    </style>
    <style>
        .main .type-list {
            border: 6px solid #004add;
            border-top: 1px solid #004add;
            width: 170px;
            left: -6px;
            top: 42px;
            opacity: 1;
            background-color: white;
            position: absolute;
        }
        .main .topicItem-list {
            border: 6px solid #004add;
            border-top: 1px solid #004add;
            width: 400px;
            left: -6px;
            top: 42px;
            opacity: 1;
            background-color: white;
            position: absolute;
        }
        #type-select:hover{
            cursor: pointer;
        }

        .main .detail .title {
            height: 40px;
            border: 1px #ccc;
            border-radius: 0;
        }

        .main .detail .info {

            border: 1px #ccc;
            border-radius: 0;
        }
        .main .detail .file{
            position: absolute;
            top: 0px;
            opacity: 0;
        }
        .main .detail .file:hover{
            cursor: pointer;
        }

        .type-item:hover{
            cursor: pointer;
            background-color: darkturquoise;
        }

        .main .due-bar {
            margin-bottom:10px;
        }

        .clearfix::after {
            content:"";
            display: block;
            height:0;
            clear: both;
        }

        .main .due-bar .due-title{
            margin-right:17px;
        }
        .main .due-bar .due-item {
            float: left;

        }

        .main .due-bar .due-style {
            background-color:lightgray;
            margin-right: 10px;
            border-radius:4px;

            width:95px;
        }
        .input-style {
            background-color: lightgray;
            height: 24px;

        }
    </style>
</head>
<body>
<div class="nav">
    <div class="nav-content">
        <div class="logo"><img src="/image/LOGO.png"  style="width:222px;height:114px;"></div>
        <div class="wel-content">
            <div>Welcome!</div>
            <div th:value="|${currentTopic.courseId} G${currentTopic.courseGroup}|">SSK3313 G4</div>
        </div>
    </div>
</div>
<div class="split-line">
    <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span>
</div>
<div class="main">

    <div class="mg func-bar clearfix">
        <div class="detail content func-type" style="position: relative">
            <div id="type-select" class="type-title" th:inline="text"><span id="type-icon" class="glyphicon glyphicon-play"></span>[[${item.itemType}]]</div>

        </div>


        <div class="detail content func-title"  style="position: relative">
            <div id="topicitem-select" class="type-title" >
                <span id="topicitem-icon" class="glyphicon glyphicon-play"></span>[[${currentTopic.topicName}]]
            </div>

        </div>

    </div>
    <div class="mg detail msg-title">
        <input type="hidden" id="itemId" name="itemType" th:value="${item.itemId}">
        <input type="hidden" id="itemType" name="itemType" th:value="${item.itemType}">
        <input type="hidden" id="topicId" name="topicId" th:value="${currentTopic.topicId}">
        <input type="hidden" id="topicName" name="topicId" th:value="${currentTopic.topicName}">
        <input type="text" id="itemTitle" class="form-control title" placeholder="" th:value="${item.itemTitle}">

    </div>
    <div class="mg detail msg-content">
        <textarea name="topicInfo" id="itemInfo" class="form-control info" rows="5" th:text="${item.itemInfo}"></textarea>
    </div>
    <div class="mg detail add-topic" style="position: relative">
        <span class="glyphicon glyphicon-plus" style="color: #004add;margin: 0 5px"></span>
        <span id="fileName" class="disabled-style" th:text="${item.attachment}">Uplodate attachrpent here</span>
        <input type="file" name="file"  class="form-control file" id="exampleInputFile" placeholder="Uplodate attachrpent here">
    </div>


    <div th:if="${item.itemType}=='TASK'" class="task-due-bar" style="display: none">
        <div class="due-bar clearfix">
            <div class="due-item due-title">
                <span>Due:</span>
            </div>
            <div class="due-item due-year due-style">
                <input type="text" id="due-year" class="form-control input-style" placeholder="year">
            </div>
            <div class="due-item due-month due-style">
                <input type="text" id="due-month" class="form-control input-style" placeholder="month">
            </div>
            <div class="due-item due-day due-style">
                <input type="text" id="due-day" class="form-control input-style" placeholder="day">
            </div>
            <div class="due-item due-hour due-style">
                <input type="text" id="due-hour" class="form-control input-style" placeholder="hour">
            </div>
            <div class="due-item due-min due-style">
                <!--                <span class="glyphicon glyphicon-triangle-bottom"></span>-->
                <!--                <span id="due-min">Min</span>-->
                <input type="text" id="due-min" class="form-control input-style" placeholder="min">
            </div>

        </div>
    </div>

    <div th:if="${item.itemType}=='TEST'" class="test-due-bar" style="display: none">
        <div class="due-bar clearfix">
            <div class="due-item due-title" style="margin-right: 6px">
                <span>From:</span>
            </div>
            <div class="due-item due-year due-style">
                <input type="text" id="from-year" class="form-control input-style" placeholder="year">
            </div>
            <div class="due-item due-month due-style">
                <input type="text" id="from-month" class="form-control input-style" placeholder="month">
            </div>
            <div class="due-item due-day due-style">
                <input type="text" id="from-day" class="form-control input-style" placeholder="day">
            </div>
            <div class="due-item due-hour due-style">
                <input type="text" id="from-hour" class="form-control input-style" placeholder="hour">
            </div>
            <div class="due-item due-min due-style">
                <input type="text" id="from-min" class="form-control input-style" placeholder="min">
            </div>

        </div>
        <div class="due-bar clearfix">
            <div class="due-item due-title" style="margin-right: 30px;">
                <span>To:</span>
            </div>
            <div class="due-item due-year due-style">
                <input type="text" id="to-year" class="form-control input-style" placeholder="year">
            </div>
            <div class="due-item due-month due-style">
                <input type="text" id="to-month" class="form-control input-style" placeholder="month">
            </div>
            <div class="due-item due-day due-style">
                <input type="text" id="to-day" class="form-control input-style" placeholder="day">
            </div>
            <div class="due-item due-hour due-style">
                <input type="text" id="to-hour" class="form-control input-style" placeholder="hour">
            </div>
            <div class="due-item due-min due-style">
                <input type="text" id="to-min" class="form-control input-style" placeholder="min">
            </div>

        </div>
    </div>


    <div class="btn-bar">
        <div id="back" class="btn back btn-style">Back</div>
        <div id="upload" class="btn update btn-style">Upload</div>
    </div>

</div>
<script >



    $("#exampleInputFile").change(function () {
        $("#fileName").html($("#exampleInputFile")[0].files[0].name)
    })

    $("#upload").click(function () {
        let formData = new FormData();
        formData.append("itemId",$("#itemId").val());
        formData.append("itemType",$("#itemType").val());
        formData.append("topicId",$("#topicId").val());
        formData.append("topicName",$("#topicName").val());
        formData.append("itemTitle",$("#itemTitle").val());
        formData.append("itemInfo",$("#itemInfo").val());
        if ($("#exampleInputFile")[0].files[0]){
            formData.append("attachment",$("#fileName").html());
        }
        formData.append("file",$("#exampleInputFile")[0].files[0]);
        // if ($("#itemType").val()==="TEST"){
        //     let year = document.getElementById("from-year").value;
        //     let month = document.getElementById("from-month").value;
        //     let day = document.getElementById("from-day").value;
        //     let hour = document.getElementById("from-hour").value;
        //     let min = document.getElementById("from-min").value;
        //     let from = `${year}-${month}-${day} ${hour}:${min}`
        //
        //
        //     year = document.getElementById("to-year").value;
        //     month = document.getElementById("to-month").value;
        //     day = document.getElementById("to-day").value;
        //     hour = document.getElementById("to-hour").value;
        //     min = document.getElementById("to-min").value;
        //
        //     let to = `${year}-${month}-${day} ${hour}:${min}`
        //     formData.append("itemFrom",from);
        //     formData.append("itemTo",to);
        // }else if ($("#itemType").val()==="TASK") {
        //     let year = document.getElementById("due-year").value;
        //     let month = document.getElementById("due-month").value;
        //     let day = document.getElementById("due-day").value;
        //     let hour = document.getElementById("due-hour").value;
        //     let min = document.getElementById("due-min").value;
        //     let due = `${year}-${month}-${day} ${hour}:${min}`
        //     formData.append("itemDue",due);
        // }
        $.ajax({
            url:"/update/courseItem",
            method:"POST",
            data:formData,
            contentType:false,
            processData: false,
            success:function (data) {
                if (data.code===true){
                    // $("#back").click()
                    alert("succsee");
                }else {
                    alert(data.errMsg);
                }
            }
        })
    })

    $(".type-item").click(function (event) {
        let selectType = $(event.currentTarget).children().html().toUpperCase();
        if (selectType==="TASK"){
            $(".test-due-bar").hide()
            $(".task-due-bar").show()
        }else if (selectType==="TEST"){
            $(".test-due-bar").show()
            $(".task-due-bar").hide()
        }else{
            $(".task-due-bar").hide()
            $(".test-due-bar").hide()
        }

        $("#type-select").html('<span id="type-icon" class="glyphicon glyphicon-play"></span>'+$(event.currentTarget).children().html())
        $("#itemType").val(selectType);
        $("#type-list").hide()


    })


</script>

<script th:inline="javascript">
    $("#back").click(function () {
        document.location = "/courseInfo/"+[[${uniId}]]+"/"+[[${courseId}]]
    })
</script>
</body>
</html>